<template>
    <view class="refund-list">
        <view class="refund-item" v-for="(item,index) in refundList" :key="index">
            <view class="item-content">
                <view class="item-customer">客户名称:{{item.customerName}}</view>
                <view class="item-number">单号:{{item.orderCode}}</view>
                <view class="item-amount">金额:{{item.taxAmount}}</view>
                <view class="item-reason">退款理由:{{item.refundReason}}</view>
            </view>
            <view class="item-operate">
                <view class="btn-pass" @click="showConfirm(item)">同意</view>
                <view class="btn-refuse" @click="showReason(item)">拒绝</view>
            </view>
        </view>
        <view class="confirm-modal" v-show="showPassModal">
            <view class="modal-content">
                <view class="modal-title">您确定同意退款吗？</view>
                <view class="modal-btns">
                    <view class="btn-modal-pass" @click="passRefund">同意</view>
                    <view class="btn-modal-cancel" @click="cancelPass">取消</view>
                </view>
            </view>
        </view>
        <view class="reason-modal" v-show="showRefuseModal">
            <view class="modal-content">
                <view class="modal-title">您确定拒绝退款吗？</view>
                <view class="modal-input">
                    <input type="text" v-model="refuseReason" placeholder="请输入拒绝理由">
                </view>
                <view class="modal-btns">
                    <view class="btn-modal-refuse" @click="refuseRefund">拒绝</view>
                    <view class="btn-modal-cancel" @click="cancelRefuse">取消</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {gatewayRefund, refundOrderList} from "@/service/api/refund";
export default {
    data() {
        return {
            refundList: [
            ],
            showPassModal: false,
            showRefuseModal: false,
            currentRefund: '',
            refuseReason: '',
        };
    },
    created() {
        this.onGet()
    },

    onPullDownRefresh() {
        this.onGet()
    },
    methods: {
        onGet(){
            const data = {startDate:'2021-01-01'}
            refundOrderList(data).then(res=>{
                this.refundList = res.data.content
            })
        },

        showConfirm(item) {
            this.showPassModal = true;
            this.currentRefund = item;
        },
        cancelPass() {
            this.showPassModal = false;
        },
        passRefund() {
            uni.showLoading({title:'提交中'})
            // 处理同意退款逻辑
            gatewayRefund({orderId:this.currentRefund.orderId}).then(res=>{
                uni.hideLoading()
                if (res.status === 200){
                    uni.showToast({title:'退款成功',icon:'success'})
                    setTimeout(()=>{
                        this.onGet()
                    },2000)

                }else {
                    uni.showToast({title:res.msg,icon:'error'})
                }
            })
            this.showPassModal = false;
        },
        showReason(item) {
            this.showRefuseModal = true;
            this.currentRefund = item;
        },
        cancelRefuse() {
            this.showRefuseModal = false;
            this.refuseReason = '';
        },
        refuseRefund() {
            // 处理拒绝退款逻辑
            console.log('拒绝退款，原因：', this.refuseReason);
            if (!this.refuseReason)return uni.showToast({title:'退款理由不能为空',icon:'none'})

            gatewayRefund({orderId:this.currentRefund.orderId,refundRejectReason:this.refuseReason}).then(res=>{
                if (res.status === 200){
                    uni.showToast({title:'操作成功',icon:'success'})
                    this.onGet()
                }else {
                    uni.showToast({title:res.msg,icon:'error'})
                }
            })
            this.showRefuseModal = false;
            this.refuseReason = '';
        },
    },
};
</script>

<style>
.refund-list {
    padding: 20rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #f5f5f5;
}

.refund-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    background-color: #fff;
}

.item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30rpx;
}

.item-customer {
    font-weight: bold;
}

.item-number {
    margin-top: 8rpx;
    color: #999;
}

.item-amount {
    margin-top: 14rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #f40;
}

.item-reason {
    margin-top: 8rpx;
    color: #999;
}

.item-operate {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 200rpx;
    height: 150rpx;
    background-color: #fff;
}

.btn-pass,
.btn-refuse {
    width: 140rpx;
    height: 60rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
    line-height: 60rpx;
    margin-bottom: 20rpx;
    cursor: pointer;
}

.btn-pass {
    background-color: #09bb07;
}

.btn-refuse {
    background-color: #f40;
}

.confirm-modal,
.reason-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
    width: 600rpx;
    height: 400rpx;
    border-radius: 20rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20rpx;
}

.modal-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    text-align: center;
}

.btn-modal-pass,
.btn-modal-refuse,
.btn-modal-cancel {
    width: 200rpx;
    height: 60rpx;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
    line-height: 60rpx;
    margin-top: 40rpx;
    cursor: pointer;
}

.btn-modal-pass {
    background-color: #09bb07;
}

.btn-modal-refuse {
    background-color: #f40;
}

.btn-modal-cancel {
    background-color: #999;
}

.modal-input {
    margin-top: 40rpx;
    width: 380rpx;
    height: 80rpx;
    border: 1rpx solid #ccc;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-input input {
    width: 340rpx;
    height: 60rpx;
    border: none;
    font-size: 32rpx;
    text-indent: 20rpx;
}
.modal-btns{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 70rpx;
}
</style>
Was the last answer useful?


